<template>
    <div>
        <div class="select">
            <el-form :inline="true" :model="selectData" class="demo-form-inline">
                <el-form-item label="标题">
                    <el-input v-model="selectData.title" placeholder="亲输入标题" />
                </el-form-item>
                <el-form-item label="详情">
                    <el-input v-model="selectData.introduce" placeholder="亲输入详情" />
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="list" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column prop="title" label="标题" width="180" />
            <el-table-column prop="introduce" label="详情" />
        </el-table>
        <el-pagination @current-change="currentChange" @size-change="sizeChange" layout="prev, pager, next" :total="selectData.count" />
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { getGoodsList } from '../request/api'
import { InitData } from '../type/goods'

export default defineComponent({
    setup () {
        const data = reactive(new InitData())
        getGoodsList().then(res => {
            console.log(res)
            data.list = res.data
            data.selectData.count = res.data.length
        })

        const currentChange = (page:number) => {
            data.selectData.page = page
        }

        const sizeChange = (pagesize:number) => {
            data.selectData.pageSize = pagesize
        }

        return {
            ...toRefs(data),
            currentChange,
            sizeChange
        }
    }
})
</script>

<style scoped>

</style>